<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>体验动态的nodelist</title>
</head>
<body>
<div class="test">
    <div class="one">小喵</div>
</div>
<script>
    var lis = document.getElementsByClassName("one");
//    for(var i=0;i<lis.length;i++){
//        var newli = document.createElement("div");
//        document.getElementsByClassName("test")[0].append(newli);
//    }
//    如上注释的代码所示：因为开始时test里面有一个div，所以循环开始，循环第一步又新建一个div。
//    但是lis是动态的，也在不断的加一。所以上面是个死循环

    var pic = lis.length;
    for(var i=0;i<pic;i++){
        var newli = document.createElement("div");
        document.getElementsByClassName("test")[0].append(newli);
    }
//    可以如上操作，先取一下test里面子元素的快照，就不再是动态的nodelist了
</script>
</body>
</html>